<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="450">
        <Form :model="data" :rules="ruleValidate" ref="formCreate" label-position="top">
            <Row :gutter="12">
                <Col :span="12">
                    <FormItem label="产品料号" prop="unique">
                        <Input v-model="data.unique" disabled></Input>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="海关代码" prop="hs_code">
                        <SearchSelect url="common/select/hs_code" v-model="data.hs_code" show-code
                                      @on-change="hsCodeChange"></SearchSelect>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="产品净重" prop="net_weight">
                        <Input v-model="data.net_weight" number></Input>
                    </FormItem>
                </Col>

                <Col :span="12" v-if="Boolean(hsCodeItem.unit1)">
                    <FormItem label="法一" prop="qy1" :rules="[{required: true,type: 'number', message: '法定数量必须填写'}]">
                        <Input v-model="data.qy1"></Input>
                    </FormItem>
                </Col>

                <Col :span="12" v-if="Boolean(hsCodeItem.unit2)">
                    <FormItem label="法二" prop="qy2" :rules="[{required: true,type: 'number', message: '法定数量必须填写'}]">
                        <Input v-model="data.qy2"></Input>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="原产国" prop="country">
                        <RemoteSelect url="common/select/country" v-model="data.country"></RemoteSelect>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="申报单位" prop="unit">
                        <RemoteSelect url="common/select/unit" v-model="data.unit"></RemoteSelect>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="产品名称" prop="name">
                        <Input v-model="data.name"></Input>
                    </FormItem>
                </Col>

                <Col :span="24">
                    <FormItem label="申报要素" prop="element">
                        <Input v-model="data.element">
                            <Button slot="append" icon="md-barcode" @click="elementModal = true"></Button>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
        </Form>

        <IElement v-if="elementModal" v-model="elementModal" :props="hsCodeItem" :element="String(data.element)"
                  @on-input="(v) => data.element = v"></IElement>

        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>


    import IDrawer from "../../../../components/layout/IDrawer";
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import RemoteSelect from "../../../../components/form/remoteSelect";
    import ItemCol from "../../../../components/layout/ItemCol";
    import UploadImages from "../../../../components/form/uploadImages";
    import SearchSelect from "../../../../components/form/searchSelect";
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import IModal from "../../../../components/layout/IModal";
    import IElement from "./element";

    export default {
        name: "create",
        components: {IElement, IModal, RemoteSpan, SearchSelect, UploadImages, ItemCol, RemoteSelect, IDrawer},
        mixins: [IDrawerMixins],
        data() {
            return {
                ruleValidate: {
                    name: [{required: true, message: '产品名称必须填写！'}],
                    hs_code: [{required: true, message: '商品编码必须填写！'}],
                    country: [{required: true, message: '原产国必须填写！'}],
                    unit: [{required: true, message: '申报单位必须填写！'}],
                    net_weight: [{required: true, message: '净重必须填写！'}],
                    element: [{required: true, max: 255, message: '申报要素必须填写'}],
                },
                data: {},
                hsCodeItem: {},
                elementModal: false
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`product/index/${this.props.id}/record`).then((res) => {
                    this.hsCodeItem = res.hs_code_model;
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submit(name) {
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.put(`product/index/${this.props.id}/record`, this.data).then((res) => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            hsCodeChange(e) {
                this.hsCodeItem = e;
            }
        }
    }
</script>

<style scoped>

</style>
